<template>
	<view class="module-list">
		<view class="list-item" v-for="(item, index) in modules" :key="index" @click="modulesTap(item)">
			<view class="icon">
				<image :src="item.icon" mode=""></image>
			</view>
			<view class="title" v-text="item.title"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "module-list",
		props: {},
		data () {
			return { 
				title: '不显示',
				modules: [{
					state: false,
					title: '物业缴费',
					icon: '../../../static/images/home/jiaofei.png',
					url: 'home/PropertyPayCost/PropertyPayCost.html'
				}, {
					state: true,
					title: '投诉报修',
					icon: '../../../static/images/home/baoxiu.png',
					url: 'home/repairs/repairs.html'
				}, {
					state: false,
					title: '便民服务',
					icon: '../../../static/images/home/bianmin.png',
					url: 'home/service/service.html'
				}, {
					title: '物业客服',
					icon: '../../../static/images/home/lianxi.png',
				}]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.module-list {
		margin: 0 20upx;
		height: 200upx;
		background-color: #fff;
		border-radius: 14upx;
		display: flex;
		align-items: center;
		box-shadow: 0 3upx 30upx 0 rgba(#4FA7E6, 0.3);
		>view {
			width: 25%;
		}

		.list-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20upx;
			.icon {
				width: 60upx;
				height: 60upx;
				margin-bottom: 20upx;
				> image {
					width: 100%;
					height: 100%;
				}
			}

			.title {
				font-size: 26upx;
				color: #4FA7E6;
			}
		}
	}
</style>
